/*
 * @Author: your name
 * @Date: 2021-04-09 13:40:33
 * @LastEditTime: 2021-04-09 18:25:51
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \v3-ts\src\views\garbage\garbage-index.tsx
 */

import { defineComponent, onMounted, reactive } from 'vue';
import { QueryGarbageCustomerList as QueryGarbageCustomerList } from '@/axios/modules/garbage';
import { tableColumns } from 'hooks/useColumns';
import { globalPagination } from 'hooks/usePagination';
import { IGarbageCustomerList as IGarbageCustomerList } from 'type/api.type';
import Form from 'comps/form';
import { useForm } from 'hooks/useForm';
export default defineComponent({
  name: 'GarbageList',
  components: {
    YanForm: Form,
  },
  setup() {
    /** 获取表格json数据 */
    const { garbageTable } = tableColumns();

    /** 查询参数 */
    const queryInfo: IGarbageCustomerList = reactive({
      pageNum: 1,
      pageSize: 10,
      custCode: '',
      custName: '',
      status: '',
      contactsPhone: '',
    });
    /** 获取查询表单json数据 */
    const { garbageForm } = useForm();

    /**
     * @description: data为表格数组
     * @description: pagination为分页对象
     * @description queryList为查询方法
     * @param {Function} QueryGarbageCustomeList - 调用接口的方法
     */
    const { data, pagination, queryList } = globalPagination(QueryGarbageCustomerList);

    /**
     * @description: 查询方法
     * @description: 分页、排序、筛选变化时触发
     * @param {object} pagination - 分页参数
     */
    const handleChange = (pagination: { current: number; pageSize: number }) => {
      queryInfo.pageNum = pagination.current;
      queryInfo.pageSize = pagination.pageSize;
      queryList(queryInfo);
    };

    /**
     * @description: 重置参数并查询
     */
    const handleClear = (): void => {
      Object.keys(queryInfo).forEach((item) => {
        if (!['pageSize', 'pageNum'].includes(item)) {
          queryInfo[item] = '';
        } else {
          queryInfo.pageNum = 1;
          queryInfo.pageSize = 10;
        }
      });
      queryList(queryInfo);
    };

    onMounted(() => {
      queryList(queryInfo);
    });

    return () => (
      <>
        <div class="py-10px px-20px w-full rounded-4px shadow-lg bg-white">
          <yan-form
            v-model={queryInfo}
            schemas={garbageForm.value}
            column={4}
            label-width="80px"
          ></yan-form>
          <div class="text-right">
            <a-button class="mr-20px" type="primary" onClick={handleChange}>
              查询
            </a-button>
            <a-button onClick={handleClear}>重置</a-button>
          </div>
        </div>
        <div class="py-10px px-20px w-full rounded-4px shadow-lg bg-white">
          <a-table
            rowKey={(record: { custId: string }) => record.custId}
            bordered
            scroll={{ x: 1500 }}
            columns={garbageTable}
            data-source={data.value}
            pagination={pagination}
            onChange={handleChange}
          ></a-table>
        </div>
      </>
    );
  },
});
